<template>
	<view class="container">
		<!-- 登录 -->
		<view class="toubu">
			<view class="toubu-logo">
				<image src="/static/icon/logo.png" mode=""></image>
			</view>
			<view class="toubu-youbian">
				<view class="youbian-shu">
					<text>{{walletAddress}}</text>
				</view>
				<!-- <view class="youbian-logo">
					<image src="/static/icon/touxian.png" mode=""></image>
				</view> -->
			</view>
		</view>
		
		<!-- 兑换 -->
		<view class="duihuan">
			<view class="duihuanzhong">
			<view class="duihuanzuo">
				<view class="duihuan2">
				<view class="duihuan3">
					<text class="duihuan3-title">{{$t('duihuan.form')}}XGT</text>
					<text class="duihuan3-yuer">{{$t('duihuan.yuer')}}：{{userinfo.xgt}}</text>
				<view class="duihuan4">
					<input type="number" value="" v-model="money" :placeholder="this.$t('kuan.qingshuru')"/>
				</view>
				</view>
				
			</view>
			<view class="duihuan2">
				<view class="duihuan3">
					<text class="duihuan3-title">{{$t('duihuan.dao')}}USDT</text>
					<text class="duihuan3-yuer">{{$t('duihuan.yuer')}}：{{userinfo.usdt}}</text>
				</view>
				
			</view>
			</view>
			<view class="duihuanyou">
				<view style="width: 120rpx;height: 100rpx;">
					<image src="/static/img/icon1.png" mode=""></image>
				</view>
				
			</view>
			
			</view>
			
		</view>
		
		<view class="duihuanbili">
			<view class="duihuanbili1">
				<text>{{$t('duihuan.bili')}}</text>
				<text>1 USDT={{(1 / this.newmoney).toFixed(3)}}XGT</text>
			</view>
		</view>
		<!-- 兑换说明 -->
		<view class="duihuanshuoming">
			<text class="duihuanshuoming1">{{$t('duihuan.shuoming')}}:</text>
			<text class="duihuanshuoming2">1:{{$t('duihuan.shuoming2')}}</text>
		</view>
		<!--立即兑换 -->
		<view class="lijiduihuan" @click="goduihuan">
			<text>{{$t('duihuan.lijiduihaun')}}</text>
		</view>
		
	</view>
</template>

<script>
	import {
		Debounce
	} from "@/api/debounce.js"; //防抖
	import walletMixin from "@/mixins/walletMixin.js"; // 钱包混入
	export default {
		mixins: [walletMixin],
		data() {
			return {
				address:'',
				userinfo:{},
				money:'',
				newmoney:''
			}
		},
		onLoad() {
			uni.setNavigationBarTitle({
			  title:  this.$t('duihuans'), // 必填，页面标题）
			 })
			this.newmoney=uni.getStorageSync('newmoney')
			// console.log('newmoney',this.newmoney);
			this.getuserinfo()
		},
		methods: {
			getuserinfo(){
				let data = {}
				let opts = {
					url: '/user/GetUserInfo',
					method: 'GET'
				};
				this.api.httpTokenRequest(opts, data).then(res => {
					// console.log('个人资料', res);
					if (res[1].data.state == 'success') {
						this.userinfo=res[1].data.list[0]
						uni.setStorageSync('userinfo', res[1].data.list[0])
						
					}
				
				})
			},
				// 立即兑换
			goduihuan:Debounce(function(){
				if(this.money<0){
					this.$modal.msg(this.$t('msg.error'))
					return
				}else if(this.money>this.userinfo.xgt){
					this.$modal.msg(this.$t('msg.error1'))
					return
				}
				let data = {
					money: this.money,
				}
				let opts = {
					url: '/xgt/huazhuan',
					method: 'POST'
				};
				// console.log('打印入参',data);
				this.api.httpTokenRequest(opts, data).then(res => {
					// console.log('兑换', res);
					if (res[1].data.state == 'success') {
						this.$modal.msg(res[1].data.msg)
						this.getuserinfo()
					}else{
						this.$modal.msg(res[1].data.msg)
					}
				
				})
				
			},1000)
		}
	}
</script>

<style>
.container {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	/* 头部登录 */
	.toubu{
		width: 94%;
		padding: 20rpx;
		margin-top: 30rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.toubu-logo{
		width: 180rpx;
		height: 60rpx;
	}
	.toubu-youbian{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.youbian-shu{
		width: 220rpx;
		height: 50rpx;
		border-radius: 30rpx;
		background-color: #1a1564;
		border: 1rpx solid #6f86fc;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		color: #ffffff;
		margin-right: 15rpx;
	}
	.youbian-logo{
		width: 60rpx;
		height: 60rpx;
		overflow: hidden;
		border-radius: 50%;
	}
	/* 货币 */
	.duihuan{
		width: 90%;
		padding: 20rpx;
		margin-top: 30rpx;
		border-radius: 10rpx;
		/* background-color: #383e6b; */
		border: 1rpx solid #aef0f5;
	}
	.duihuanzhong{
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		
	}
	.duihuanzuo{
		width: 70%;
		display: flex;
		flex-direction: column;
	}
	.duihuanyou{
		width: 30%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.duihuan2{
		width: 96%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin-top: 30rpx;
	}
	.duihuan3{
		display: flex;
		flex-direction: column;
	}
	.duihuan3-title{
		font-size: 36rpx;
		font-weight: 700;
		
	}
	.duihuan3-yuer{
		font-size: 28rpx;
		font-weight: 500;
		margin-top: 15rpx;
	}
	.duihuan4{
		width: 360rpx;
		height: 45rpx;
		border-bottom: 1rpx solid #2a98f9;
		border-radius: 10rpx;
		padding: 10rpx;
		margin-top: 15rpx;
	}
	.duihuanbili{
		width: 90%;
		padding: 20rpx;
		border-radius: 10rpx;
		/* background-color: #383e6b; */
		border: 1rpx solid #aef0f5;
		display: flex;
		flex-direction: column;
		margin-top: 30rpx;
		font-size: 28rpx;
		font-weight: 700;
	}
	.duihuanbili1{
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}
	/* 立即兑换 */
	.lijiduihuan{
		width: 96%;
		height: 110rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 10rpx;
		margin-top: 60rpx;
		border: 1rpx solid #aef0f5;
		font-size: 32rpx;
		font-weight: 700;
	}
	.duihuanshuoming{
		width: 90%;
		padding: 20rpx;
		margin-top: 30rpx;
		border-radius: 10rpx;
		display: flex;
		flex-direction: column;
		/* background-color: #383e6b; */
		border: 1rpx solid #aef0f5;
	}
	.duihuanshuoming1{
		font-size: 30rpx;
		font-weight: 700;
	}
	.duihuanshuoming2{
		font-size: 28rpx;
		margin-top: 20rpx;
		line-height: 32rpx;
		font-weight: 500;
	}
</style>
